// 通用浮动面板样式，所有同级组件通过 @import 使用
// 尺寸使用百分比并允许用户拖动右下角进行缩放（浏览器原生 resize: both）

.floating-panel {
  position: fixed; // 改为固定定位，脱离父元素限制，直接浮在页面上层
  top: 60px;
  left: 272px;
  z-index: 9999;
  /* 使用百分比+CSS变量，默认 30vw x 50vh，可通过在元素上设置 style 或 data-size 调整 */
  // 默认初始尺寸：30vw 宽度 + 50vh 高度（下面两行）
  // 可通过 data-size="sm|md|lg|xl" 或 style="--panel-width:40vw;--panel-height:55vh" 覆盖
  // 如果同时存在 data-size 与行内 CSS 变量，行内变量优先生效
  width: var(--panel-width, 25vw); // 默认宽度 30vw
  height: var(--panel-height, 30vh); // 默认高度 50vh
  max-width: 80vw;
  max-height: 80vh;
  min-width: 240px;
  min-height: 180px;
  box-sizing: border-box;
  padding: 12px 14px 18px;
  background: var(--el-fill-color-blank);
  border: 1px solid var(--el-border-color);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.20), 0 6px 24px rgba(0,0,0,.14);
  backdrop-filter: saturate(160%) blur(6px);
  overflow: auto;             // 内容滚动
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow .25s, border-color .25s, background .25s, width .25s, height .25s;
}

/* 预设尺寸：通过 data-size 属性应用不同百分比 */
/* 预设尺寸说明：
   sm  = 24vw x 40vh
   md  = 30vw x 50vh (与默认一致)
   lg  = 38vw x 60vh
   xl  = 48vw x 70vh
*/
.floating-panel[data-size='sm'] { --panel-width: 24vw; --panel-height: 40vh; }
.floating-panel[data-size='md'] { --panel-width: 30vw; --panel-height: 50vh; }
.floating-panel[data-size='lg'] { --panel-width: 38vw; --panel-height: 60vh; }
.floating-panel[data-size='xl'] { --panel-width: 48vw; --panel-height: 70vh; }

/* 响应式：极窄屏时自动扩大占比并减小 left */
@media (max-width: 900px) {
  .floating-panel { left: 8px; --panel-width: 88vw; --panel-height: 58vh; }
}
@media (max-height: 620px) {
  .floating-panel { --panel-height: 65vh; }
}

.floating-panel:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.28), 0 10px 36px rgba(0,0,0,.22);
}

html.dark .floating-panel {
  background: rgba(40,40,40,.72);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 4px 16px rgba(0,0,0,.55), 0 6px 28px rgba(0,0,0,.40);
}
html.dark .floating-panel:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.70), 0 10px 40px rgba(0,0,0,.55);
}

/* 顶部可放标题条 */
.floating-panel__header {
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

/* 内容区域占满剩余空间 */
.floating-panel__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  .section-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
}

/* 底部操作区域 */
.floating-panel__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 可选：轻微的拖动指示（右下角） */
/* .floating-panel::after { ... } 已删除 */
html.dark .floating-panel::after { /* 已禁用 */ }

/* 关闭按钮样式 */
.floating-panel .close-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  transition: background .18s, color .18s, box-shadow .18s;
}
.floating-panel .close-btn:hover { background: var(--el-color-primary-light-9, #f2f6fc); color: var(--el-color-primary); }
.floating-panel .close-btn:active { background: var(--el-color-primary-light-8, #e5f1ff); }
.floating-panel .close-btn:focus-visible { outline: 2px solid var(--el-color-primary); outline-offset: 2px; }
html.dark .floating-panel .close-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
html.dark .floating-panel .close-btn:active { background: rgba(255,255,255,.18); }
